import React, { useState } from "react";
import { Input, Space, Button, Row, Col, DatePicker } from "antd";
import { SearchRawState } from "../../types";
import dayjs from "dayjs";
import qs from "qs";
interface PropsType {
  onSearch?: (params: SearchRawState) => void;
  initValue: qs.ParsedQs;
}
const { RangePicker } = DatePicker;
const MySearch: React.FC<PropsType> = ({ onSearch, initValue }) => {
  const [searchParams, setSearchParams] = useState<SearchRawState>({
    value: (initValue.value as string) || "",
    type: (initValue.type as string) || "全部",
    start: (initValue.start as string) || "",
    end: (initValue.end as string) || "",
  });
  const types = ["全部", "英汉词典", "汉英词典", "汉字词典", "新华词典"];
  return (
    <div className="search">
      <Row className="search-item">
        <Col span={1}>搜索：</Col>
        <Col span={23}>
          <Input
            value={searchParams.value}
            onKeyDown={(e) => {
              if (e.keyCode === 13) {
                onSearch && onSearch(searchParams);
              }
            }}
            onChange={(e) =>
              setSearchParams({
                ...searchParams,
                value: e.target.value,
              })
            }
          ></Input>
        </Col>
      </Row>
      <Row className="search-item">
        <Col span={1}>类型：</Col>
        <Col span={23}>
          <Space>
            {types.map((v, i) => {
              return (
                <Button
                  onClick={() =>
                    setSearchParams({
                      ...searchParams,
                      type: v,
                    })
                  }
                  type={v === searchParams.type ? "primary" : "default"}
                  key={i}
                >
                  {v}
                </Button>
              );
            })}
          </Space>
        </Col>
      </Row>
      <Row className="search-item">
        <Col span={1}>时间：</Col>
        <Col span={23}>
          {searchParams.start && searchParams.end ? (
            <RangePicker
              defaultValue={[
                dayjs(searchParams.start),
                dayjs(searchParams.end),
              ]}
              onChange={(a, [start, end]) =>
                setSearchParams({
                  ...searchParams,
                  start,
                  end,
                })
              }
            />
          ) : (
            <RangePicker
              onChange={(a, [start, end]) =>
                setSearchParams({
                  ...searchParams,
                  start,
                  end,
                })
              }
            />
          )}
        </Col>
      </Row>
      <Row className="search-item">
        <Col span={1}></Col>
        <Col span={23}>
          <Space>
            <Button
              type="primary"
              onClick={() => onSearch && onSearch(searchParams)}
            >
              查询
            </Button>
            <Button type="primary" danger>
              重置
            </Button>
          </Space>
        </Col>
      </Row>
    </div>
  );
};

export default MySearch;
